<script  setup >
import { ref } from 'vue'
import { useRouter } from "vue-router";
import {Search}  from '@element-plus/icons-vue'
import {Suitcase,Position,Umbrella} from "@element-plus/icons";
const router = useRouter() ;
const search=()=>{
  router.push('selectflight')
}
const umbrella=()=>{
  window.open('http://www.weather.com.cn/')
}
const posision=()=>{
  router.push('flightstationbaidumap')
}
const suitcaseLine=()=>{
  router.push('luggage')
}
const activeName = ref('1')
 const carouseData = [
  {url: require("@/assets/imgs/main1.jpg")},
  {url: require("@/assets/imgs/main2.jpg")},
]


</script>

<template>
  <div style="margin-top: 30px">
    <el-row>
    <el-col :span="16">
    <el-carousel height="500px" width="500px" style="margin-top: 30px">
      <el-carousel-item v-for="item in carouseData" :key="item">
        <img :src="item.url" alt=""/>
       </el-carousel-item>
    </el-carousel>
    </el-col>
      <el-col :span="8">
        <div class="demo-collapse">
          <el-collapse v-model="activeName" accordion >
            <el-collapse-item title="机场巴士"  >
              <div class="secondfont">天津机场至武清方向 </div>
              <div class="thirdfont"><b>运行线路：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天津机场-卫国道太阳城-远洋国际中心-天津站（后广场）-天津西站-武
                清杨北路-武清友谊商厦-武清客运站</div>
              <div class="thirdfont"><b>运行方式：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（1）“天津机场至天津西站”区间：早8点至航班结束，每半小时一班。<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（2）“天津机场至武清客运站”区间：09:00、11:00、13:00、15:00、17:00、19:00、21:00发车。</div>
              <div class="thirdfont"><b>发车地点：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天津机场T2航站楼桥下5号门外。</div>
              <div class="thirdfont"><b>售票方式：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（1）现场售票，天津机场T2航站楼进港大厅7号门对过；<br>
                （2）扫码“壹行天下机场巴士”微信小程序中购票</div>
              <div class="thirdfont"><b>落客站点：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卫国道太阳城、远洋国际中心、天津站（后广场）、天津西站、
                武清杨北路、武清友谊商厦、武清客运站。</div>
              <div class="thirdfont"><b>票  价：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卫国道太阳城、远洋国际中心、天津站（后广场）：15元；
                天津西站：20元；
                武清杨北路、武清友谊商厦、武清客运站：40元。</div>
              <div class="secondfont">武清至天津机场方向 </div>
              <div class="thirdfont"><b>运行方式：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;早11点至17点，每2小时一班。</div>
              <div class="thirdfont"><b>发车地点：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;武清客运站站内。</div>
              <div class="thirdfont"><b>售票方式：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;扫码“壹行天下机场巴士”微信小程序提前两小时购票</div>
              <div class="thirdfont"><b>落客站点：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天津机场T2航站楼5号门。</div>
              <div class="thirdfont"><b>票  价：</b>40元</div>
              <div class="thirdfont"><b>温馨提示：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;非落客站点不停靠，途中落客站点不上客。<br>
                具体运营时间以当天发布时间为准，请旅客购票前拨打电话咨询
                （022-24906296）。</div>
              </el-collapse-item>
            <el-collapse-item title="停车场服务"  >
              <div class="secondfont">停车场位于天津机场航站楼前。 </div>
              <div class="thirdfont"><b>计费标准：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每次停车15分钟内免费（含15分钟），超出按以下标准计费：
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小型客车每辆每半小时2元，每超半小时加收2元；
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大型客车每辆每半小时4元，每超半小时加收4元；
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;不足半小时按半小时计收，不足一小时按一小时计算。</div>
              <div class="thirdfont"> <b>昼夜停车：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;昼夜停车车辆请按照指示标识进入“过夜车停放区”停放。
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;昼夜停车小型客车首个24小时收费60元，之后每满24小时每天50元封顶；
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大型客车首个24小时收费120元，之后每满24小时每天100元封顶；
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;不足24小时部分按照小型客车每半小时2元、
                大型客车每半小时4元累计收费。</div>
              <div class="thirdfont"><b>计费依据：</b><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天津市物价局的津价费〔2008〕265号文件。</div>
            </el-collapse-item>
            <el-collapse-item title="失物招领"  >
              <div class="secondfont"> 失物保存期限 </div>
              <div class="thirdfont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据《民法典》规定，遗失物自发布招领公告之日起1年内无人认领的，归国家所有。</div>
              <div class="secondfont"> <b>认领须知：</b> </div>
              <div class="thirdfont">a、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;若您在天津机场航站楼内遗失物品，请在中国民用机场协会官方网站查询，或致电航站楼失物招领处查询，服务电话：022-24906385。
              <br>b、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;失主亲自领取失物时，需携带本人身份证、护照等有效证件原件或其他有效身份证明，经工作人员核实无误，履行手续后返还遗失物品。
                <br>c、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;委托他人领取失物时，需携带失主亲笔签名的委托书，失主本人的身份证、护照等有效证件原件（或其复印件）或其他有效身份证明以及代领人的身份证、护照等有效证件原件，经核实无误，履行手续后返还遗失物品。
                <br>d、&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您可登录中国民用机场协会官方网站<a href="http://www.chinaairports.org.cn">（http://www.chinaairports.org.cn）</a> 在首页中查找“失物招领”模块，或直接登陆查询链接：<a href="http://www.chinaairports.org.cn/swzl/toSwzlListView.do">（http://www.chinaairports.org.cn/swzl/toSwzlListView.do）</a> ，此网页涵盖全国各地机场遗失物品公布信息，天津机场失物招领处每天会更新接收到的遗失物品信息，您可自助检索查询。
              </div>
            </el-collapse-item>
            <el-collapse-item title="医疗服务"  >
              <div class="thirdfont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;医疗服务室为您提供航站楼、机坪区域急救出诊及救护车转送病人等服务，并备有各种急救药品和常用药品。</div>
              <div class="secondfont">服务时间</div>
              <div class="thirdfont" style="text-align: center">24小时服务</div>
              <div class="secondfont">服务位置</div>
              <div class="thirdfont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国内医疗室：2号航站楼三层出发大厅靠近派出所处。
              <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国际医疗室：1号航站楼一层到达大厅。
              </div>
              <div class="secondfont">服务热线</div>
              <div class="thirdfont" style="text-align: center">医疗室：022-24905120</div>
            </el-collapse-item>
            <el-collapse-item title="功能区域" >
              <div class="secondfont">母婴室位置</div>
              <div class="thirdfont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1号航站楼母婴室位于国际隔离区内6号登机口附近。
              <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2号航站楼母婴室位于国内隔离区内222号登机口附近。此处还设有儿童游乐园。</div>
            </el-collapse-item>
            <el-collapse-item title="饮水设施" >
              <div class="thirdfont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1号和2号航站楼内为您设置了开水间和多台自助饮水机，遍及楼内旅客集中区域。</div>
            </el-collapse-item>
            <el-collapse-item title="邮递业务" >
              <div class="thirdfont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;航站楼内暂时不提供邮政服务，由此给您带来的不便，敬请谅解。
                <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如需邮寄业务，请到2号航站楼一层4号门对面顺丰快递处。</div>
            </el-collapse-item>
            <el-collapse-item title="WiFi服务" >
              <div class="thirdfont">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2号航站楼内设有wifi无线网络，使用方式如下：
                <br>用户名：Airport Free Wi-Fi TianJin
                <br>步骤：
                <br>（1）打开WIFI点击用户名。
                <br>（2）在弹出页面输入手机号，获取验证码。、
                <br>（3）规定时间内输入验证码。
                <br>（4）验证成功，开始使用。
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="query">
    <el-row>
      <el-col :span="12" class="query_left">
        <el-row>
          <el-col :span="12" class="icon" style="padding-left: 50px;padding-top: 30px">
            <el-button @click="search"  style=" height: 70px;font-size:25px;color: #3370ff;width: 70px" :icon="Search" circle/>
          <div style="margin-top: 15px;font-size: 19px;color: white;font-weight: bolder">航班查询</div>
            <div style="margin-top: 100px">
              <el-button @click="suitcaseLine"  style=" height: 70px;font-size:25px;color: #3370ff;width: 70px" :icon="Suitcase" circle/>
              <div style="margin-top: 15px;font-size: 19px;color: white;font-weight: bolder">行李查询</div>
            </div>
          </el-col>
          <el-col :span="12" class="icon" style="padding-right: 50px;padding-top: 30px">
            <el-button @click="posision"  style=" height: 70px;font-size:25px;color: #3370ff;width: 70px" :icon="Position" circle/>
            <div style="margin-top: 15px;font-size: 19px;color: white;font-weight: bolder">航站地图</div>
            <div style="margin-top: 100px">
              <el-button @click="umbrella"  style=" height: 70px;font-size:25px;color: #3370ff;width: 70px" :icon="Umbrella" circle/>
              <div style="margin-top: 15px;font-size: 19px;color: white;font-weight: bolder">天气查询</div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12"><img src="../../assets/imgs/sysphoto.jpg"
                              height="562px" width="565px" style="margin-top: 50px;display: flex" />
      </el-col>
    </el-row>
  </div>


  <div>
    <div class="title">
      <h2>
         <em>食宿玩购</em>
      </h2>
    </div>
    <div class="container">
      <img class="img1" src="../../assets/imgs/enjoy2.jpg" alt="Image 1">
      <img class="img2" src="../../assets/imgs/enjoy.jpg" alt="Image 2">
      <img class="img3" src="../../assets/imgs/enjoy8.jpg" alt="Image 3">

    </div>
    <div class="box1">
      <img class="img4" src="../../assets/imgs/enjoy3.jpg" alt="Image 4">
      <img class="img5" src="../../assets/imgs/enjoy4.jpg" alt="Image 5">
      <img class="img6" src="../../assets/imgs/enjoy5.jpg" alt="Image 6">
    </div>
  </div>

  <div class="result">
    <el-row>
    <el-col :sm="12" :lg="6">
      <el-result
          icon="success"
          title="Success Tip"
      >
        <template #sub-title>
          <div class="custom-sub-title">
            天津滨海机场祝您旅行愉快！
          </div>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6">
      <el-result
          icon="warning"
          title="Warning Tip"
      >
        <template #sub-title>
          <div class="custom-sub-title">
            请及时关注天气变化，合理安排您的出行！
          </div>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6">
      <el-result
          icon="error"
          title="Error Tip"
      >
        <template #sub-title>
          <div class="custom-sub-title">
            如您需要投诉，请拨打投诉电话：022-24900315
          </div>
        </template>
      </el-result>
    </el-col>
    <el-col :sm="12" :lg="6">
      <el-result
          icon="info"
          title="Info Tip"
      >
        <template #sub-title>
          <div class="custom-sub-title">
            如您有任何问题，请及时联系我们：022-96678
          </div>

        </template>
      </el-result>
    </el-col>
  </el-row>
  </div>
</template>

<style scoped>
.demo-collapse{
  margin-top: 15px;
  width: 380px;
}
/deep/ .el-collapse-item__header {
    font-size: 20px;
  background-color: #f2f2f2;
  border-radius: 20px;
  padding-left: 25%;
  margin-top: 15px;
}
.secondfont{
  font-weight: bold;
  border-radius: 15px;
  font-size: 18px;
  font-family: "Arial Black",serif;
  background-color: #3370ff;
  color: white;
}
.thirdfont{
  font-size: 14px;
  text-align: left;
  background-color: #f4f4f4;
  padding-left: 20px;
  padding-right: 20px;
}
.query_left{
  height:562px ;
  width: 400px;
  margin-top: 50px;
  background-color: #3370ff;
}
.query{
  margin-left: 70px;
  margin-top: 30px;
}
.result{
  margin-right: 20px;
}
.icon{
  margin-top: 90px;
}
.title{
  font-family:'黑体' ;
  font-size: 33px;


}
/* 容器样式 */
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 300px; /* 根据需要调整高度 */
}
.box1{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 300px; /* 根据需要调整高度 */
}
/* 图片样式 */
.img1, .img2, .img3, .img4 ,.img5 ,.img6 {
  width: 410px; /* 初始宽度 */
  height: 280px; /* 保持宽高比 */
  transition: transform 0.3s ease; /* 过渡效果 */
  background-color: #f5f5f5;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10%; /* 设置圆角半径为10%，使四个角变成椭圆 */
  object-fit: cover; /* 保持图片比例并填充整个容器 */
}

/* 鼠标悬停时的缩放效果 */
.img1:hover, .img2:hover, .img3:hover, .img4:hover ,.img5:hover ,.img6:hover {
  transform: scale(1.3); /* 放大比例 */
}

.result .el-result .custom-sub-title {
  font-size: 15px; /* 根据需要调整字体大小 */
  font-weight: bolder; /* 如果需要加粗 */
  color: #4d4c4c; /* 字体颜色，根据需要调整 */
}
</style>